import React, { useRef,useState } from 'react';
import { DeleteOutlined, SearchOutlined,PaperClipOutlined ,PlusOutlined,EditOutlined } from '@ant-design/icons';
import { Button,  DatePicker,Table ,Card, Col, Form,  Row,} from 'antd';
import { GridContent } from '@ant-design/pro-layout';
import type { ProColumns, ActionType } from '@ant-design/pro-table';

import StandardFormRow from '@/components/StandardFormRow';
import TagSelect from '@/components/TagSelect';
import styles from './style.less'

const FormItem = Form.Item;


type GithubIssueItem = {
  id: number;
  planName: string;//	计划名称
  planValue: string;//	计划名称
  projectName: string;//	项目名称
  location: string;//	区域位置
  cycle: string;//		巡检周期
  remark: string;//		备注
  plannedTime: string;//计划巡检时间
  actualTime: string;//实际巡检时间
  inspector: string;//巡检人
  patrolItem: string;//巡检项
};
const tableListDataSource: TableListItem[] = [];


for (let i = 0; i < 5; i += 1) {
  tableListDataSource.push({
    id: i,
    planName:'计划名称'+i,
    planValue: '计划内容'+i,
    projectName:'项目名称'+i,
    location: '区域位置'+i,
    cycle:'计划名称'+i,
    remark: '计划内容'+i,
    plannedTime:'项目名称'+i,
    actualTime: '区域位置'+i,
    inspector: '巡检人'+i,
    patrolItem: '这是一个备注'+i
  });
}


const valueEnum = {
  0: 'qi',
  1: 'wei',
};
function onChange(pagination, filters, sorter, extra) {
  console.log('params', pagination, filters, sorter, extra);
}

const columns: ProColumns<GithubIssueItem>[] = [

  {
    title: '计划名称',
    dataIndex: 'planValue',
    align: 'right',
    search: false,
   
  },  {
    title: '计划内容',
    dataIndex: 'planValue',
    align: 'right',
    search: false,
   
  },
  {
    title: '项目名称',
    
    align: 'right',
    dataIndex: 'projectName',
  },
  {
    title: '区域位置',
    dataIndex: 'location',
  },
  {
    title: '巡检周期',
    dataIndex: 'cycle',
  },
  {
    title: '备注',
    dataIndex: 'remark',
  },
  {
    title: '计划巡检时间',
    dataIndex: 'plannedTime',
  }, {
    title: '实际巡检时间',
    dataIndex: 'actualTime',
  },
  {
    title: '巡检人',
    dataIndex: 'inspector',
  },
  {
    title: '巡检项',
    dataIndex: 'patrolItem',
  }
 
];



export default () => {
  const [form] = Form.useForm();
  const actionRef = useRef<ActionType>();
     const [modalVisit, setModalVisit] = useState(false);
  return (
    <GridContent>
    <React.Fragment>
    <Card bordered={false}>
        <Form
          layout="inline"
          form={form}
          initialValues={{
            owner: ['wjh', 'zxx'],
          }}
          onValuesChange={() => {
            // dispatch({
            //   type: 'listAndsearchAndarticles/fetch',
            //   payload: {
            //     count: 8,
            //   },
            // });
          }}
        >
          <StandardFormRow title="隐患类型" grid style={{ paddingBottom: 11 }}>
            <FormItem name="category">
              <TagSelect expandable>
                <TagSelect.Option value="cat1">未巡检</TagSelect.Option>
                <TagSelect.Option value="cat2">正常</TagSelect.Option>
                <TagSelect.Option value="cat3">上报缺陷</TagSelect.Option>
              
              </TagSelect>
            </FormItem>
          </StandardFormRow>
         
          <StandardFormRow title="其它选项" grid >
            <Row gutter={[16,24]} justify="space-between">
              <Col xl={10} lg={10} md={12} sm={12} xs={12}>
              <FormItem >
                <div  className={styles.inputBg} style={{width:150}} >
                  <DatePicker bordered={false}    popupStyle={{ background: 'rgb(20, 49, 115)'}} />
                </div>
              </FormItem>
              </Col>
              <Col xl={8} lg={10} md={12} sm={12} xs={12} style={{textAlign: 'right'}}>
                <Button type="primary" icon={<SearchOutlined />}  style={{marginRight:'15px'}}  className={styles.searchBtnBg}>搜索</Button>

                <Button type="primary"  icon={<DeleteOutlined />}  className={styles.resetBtnBg}>重置</Button>
               
              </Col>
            </Row>
          </StandardFormRow>
        </Form>
      </Card>
      <div style={{    margin: '0 24px'}}>
      <Row  className={styles.operationrow} > 
        <Col  className={[styles.item, styles.left].join(' ')}>
          <Button type="primary" icon={<PlusOutlined />}  >新增</Button>
          <Button type="primary" icon={<EditOutlined />}  >编辑</Button>
          <Button type="primary" icon={<DeleteOutlined />}  className={styles.resetBtnBg}>删除</Button>
        </Col>
        <Col  className={[styles.item, styles.right].join(' ')}>
        <Button type="primary" icon={<PaperClipOutlined />}  className={styles.exportBtnBg}>导出</Button>
        <span>
             <span  className={[styles.calendarBlock, styles.color1].join(' ')}></span>
             <span>正常已巡检</span>
        </span>
        <span>
             <span  className={[styles.calendarBlock, styles.color2].join(' ')}></span>
             <span>巡检有缺陷</span>
        </span>
        <span>
             <span  className={[styles.calendarBlock, styles.color3].join(' ')}></span>
             <span>未巡检</span>
        </span>
        </Col>
       
      </Row>
    
      <Table columns={columns} dataSource={tableListDataSource} onChange={onChange} />
     </div>
      </React.Fragment>
      </GridContent>
  );
};